<template>
  <div class="loginview">
    <NavBarView />
    <div class="login">
      <h1>设置新密码</h1>
      <div class="">
        <p>请输入新密码,并重新登录验证</p>
      </div>
      <div style="margin-top: 80px">
        <van-form>
          <!-- 新密码 -->
          <van-field
            v-model="password"
            type="tel"
            placeholder="请输入6-20位新密码"
            maxlength="20"
            minlength="6"
            :rules="[{ required: true, message: '请填写新密码' }]"
          >
          </van-field>
        </van-form>
        <van-button
          type="primary"
          block
          style="margin-top: 80px"
          @click="submit"
          >确定</van-button
        >
      </div>
    </div>
  </div>
</template>
      
  <script setup lang="ts">
import NavBarView from "./components/NavBarView.vue";

import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { updatePsd } from "./services/phoneLogin";
const password = ref("");
const route = useRoute();
const router = useRouter();
const _id = ref("");

onMounted(() => {
  _id.value = route.query._id as string;
});

const submit = async () => {
  let res: any = await updatePsd({ _id: _id.value, password: password.value });
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    router.push("/psdLogin");
  }
};
</script>
      
<style scoped lang="scss">
.loginview {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .login {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    padding: 0% 20px;
    margin-top: 46px;
    box-sizing: border-box;
    .login-form {
      margin-top: 6ex;
      .van-field {
        margin-bottom: 20px;
      }
    }
    h1 {
      font-weight: 700;
      margin-bottom: 20px;
    }
    .agreement {
      margin-bottom: 20px;
      span {
        color: #1989fa;
      }
    }
    .other-login {
      margin-top: 60px;
    }
  }
}
</style>